import React, { useEffect,useState } from "react";
import * as Highcharts from 'highcharts';
import axios from "axios";
1
const Chart = ()=>{

    const [buyData,setBuyData] = useState([]);  
    const [sellData,setSellData] = useState([]);
    const [cumulativeNetData,setCumulativeNetData] = useState([]);

    
    var option={
        "chart": {
            "animation": false,
            "backgroundColor": "transparent",
            "plotBorderWidth": 1,
            "plotBorderColor": "#46637F"
        },
        title: {
            text: ''
        },
        "credits": {
            "enabled": false
        },
        "annotations": [
            {
                "draggable": "",
                "shapes": [
                    {
                        "point": "mockBuy",
                        "type": "rect",
                        "widt": 100,
                        "height": 30
                    },
                    {
                        "point": "mockSell",
                        "type": "rect",
                        "widt": 100,
                        "height": 30
                    }
                ],
                "labels": [
                    {
                        "text": "Buy",
                        "backgroundColor": "transparent",
                        "borderColor": "transparent",
                        "style": {
                            "color": "#FFFFFF"
                        }
                    },
                    {
                        "verticalAlign": "top",
                        "text": "Sell",
                        "backgroundColor": "transparent",
                        "borderColor": "transparent",
                        "style": {
                            "color": "#FFFFFF"
                        },
                        "y": 10
                    }
                ],
                "events": {}
            }
        ],
        "tooltip": {
            "shared": true,
            "useHTML": true
        },
        "legend": {
            "layout": "vertical",
            "align": "right",
            "verticalAlign": "top",
            "x": 0,
            "y": 50,
            "itemStyle": {
                "color": "#FFFFFF",
                "fontSize": "12px"
            },
            "itemHoverStyle": {
                "color": "#FFFFFF"
            },
            "floating": true,
            "backgroundColor": "transparent"
        },
        "xAxis": {
            "opposite": true,
            "type": "datetime",
            "tickLength": 0,
            "gridLineWidth": 1,
            "gridLineColor": "#46637F",
            "lineColor": "#46637F",
            "labels": {
                "format": "{value:%Y/%m/%d}",
                "style": {
                    "color": "#97AFC6"
                }
            }
        },
        "yAxis": {
            "title": {text: ''},
            "gridLineColor": "#46637f",
            "labels": {
                "format": "{value}",
                "style": {
                    "color": "#97AFC6"
                }
            }
        },
        "plotOptions": {
            "column": {
                "showInLegend": false,
                "stacking": "normal",
                "color": "#00B0B9",
                "borderColor": "#00B0B9",
                "states": {
                    "hover": {
                        "brightness": 0.3
                    }
                }
            },
            "line": {
                "marker": {
                    "symbol": "square",
                    "fillColor": "white"
                }
            },
            "series": {
                "marker": {
                    "enabled": true
                }
            }
        },
        "series": [
            {
                "type": "column",
                "name": "Buy",
                "data":buyData, 
            },
            {
                "type": "column",
                "name": "Sell",
                "data":sellData,
                "color": "rgba(0, 176, 185, 0.7)",
                "borderColor": "rgba(0, 176, 185, 0.7)"
            },
            {
                "type": "line",
                "name": "Cumulative Net",
                "data": cumulativeNetData,
                "color": "#ED8B00"
            }
        ]
    };

    const getData = () => {
        axios({
            method:'get',
            url:'http://localhost:5052/api/trade/trade/flowAnalysisInfo',
            headers: {'Content-Type':'application/x-www-form-urlencoded'}
        }).then(res=>{
            const buy_data = res.data.data.map((item)=>{
                const newItem = {
                    x:item.xloc,
                    y:item.buy
                };
                return newItem;
            })
            const sell_data = res.data.data.map((item)=>{
                const newItem = {
                    x:item.xloc,
                    y:item.sell
                };
                return newItem;
            })
            const cumulativeNet_data = res.data.data.map((item)=>{
                const newItem = {
                    x:item.xloc,
                    y:item.cumulativeNet
                };
                return newItem;
            })
            setBuyData(buy_data);
            setSellData(sell_data);
            setCumulativeNetData(cumulativeNet_data);
            console.log(option.series)
            console.log("请求成功",res.data)
        }).catch(err=>{
            console.log("请求失败",err);
        })
    }

    useEffect(()=>{
        getData();
        Highcharts.chart('chartID', option)
    },[])

    function show(){
        Highcharts.chart('chartID', option)
    }

    return (
        <div>
            <div id='chartID' onClick={show}></div>
            {/* <button onClick={show}>显示图表</button> */}
        </div>
        
    )
}

export default Chart;